/**
 * 动态页面
 * 1.获取 API 的数据
 * 2.把获取到的数据和 HTML 进行拼接
 * 3.把拼接好的数据添加到 大盒子里面
*/

$.ajax({
    // 请求类型 默认为 GET 可以设置为 GET POST DELETE PUT
    tepy: 'GET',
    // 请求路劲
    url: '/news',
    // 请求成功 自动 调用这个 函数 res 是 获取到的数据
    success: function (res) {
        // console.log($('.new .new_box').html());
        // 定义一个存储 HTML 的变量
        let htmlBox;
        // 循环获取到的数据


        // for (let index = 0; index < res.length; index++) {

        //     // 进行数据拼接 `${变量名.属值}`
        //     var html = `<div class="new_list">
        //       <div class="new_list_pic">
        //           <img src="${res[index].iamge}" alt="">
        //       </div>
        //       <div class="new_list_title">
        //           <h2>${res[index].title}</h2>
        //           <p>${res[index].description}</p>
        //           <span> ${res[index].content} </span>
        //       </div>
        //   </div>`
        //     // 把拼接好的 HTML 存储在 上面定义的变量里 
        //     htmlBox += html
        // }
        res.forEach(function (item) {
            let html = `<div class="new_list">
                <div class="new_list_pic">
                    <img src="${item.iamge}" alt="">
                </div>
                <div class="new_list_title">
                    <h2>${item.title}</h2>
                    <p>${item.description}</p>
                    <span> ${item.content} </span>
                </div>
            </div>`
            // 把拼接好的 HTML 存储在 上面定义的变量里 
            htmlBox += html
        })


        // res.forEach(item => {
        //     // 进行数据拼接 `${变量名.属值}`
        //     var html = `<div class="new_list">
        //     <div class="new_list_pic">
        //         <img src="${item.iamge}" alt="">
        //     </div>
        //     <div class="new_list_title">
        //         <h2>${item.title}</h2>
        //         <p>${item.description}</p>
        //         <span> ${item.content} </span>
        //     </div>
        // </div>`
        //     // 把拼接好的 HTML 存储在 上面定义的变量里 
        //     htmlBox += html

        //     // console.log(html);
        // })
        // 把拼接好的 HTML 添加到页面上
        $('.new .new_box').html(htmlBox)
    },
    // 如何请求失败会调用这个函数 err 是失败的返回值
    error: function (err) {
        console.log(err);
    },
});